<template>
  <div class="container">
    <div class="model" :class="props.color === 'orange' ? 'model1' : 'model2'">
      <div class="val" :style="{ color: `${props.color === 'orange' ? '#FF7300' : '#FFBB00'}` }">{{ props.values }}</div>
    </div>
    <div class="name">{{ props.name }}</div>
  </div>
</template>
<script setup lang="ts">
/** @api */
interface Props {
  name: string;
  values: string | number;
  color: string;
}
// 组件传参
const props = withDefaults(defineProps<Props>(), {
  name: '',
  values: '',
});
/** @数据 */
/** @生命周期 */
/** @方法 */
/** @侦听器 */
/** @公共方法 */
</script>
<style lang="scss" scoped>
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 33%;
  cursor: pointer;
  .model {
      width: 90px;
      height: 90px;
      line-height: 90px;
      border-radius: 50%;
      overflow: hidden;
  
      .val {
        font-size: 24px;
      }
    }
  
    .model1 {
      background: url('@/assets/imgs/icon-07.png') no-repeat center;
      background-size: 230px 220px;
      background-position: -62px -35px;
      box-shadow: 0 15px 20px #5a4e45;
    }
  
    .model2 {
      background: url('@/assets/imgs/icon-08.png') no-repeat center;
      background-size: 255px;
      background-position: -87px -41px;
      box-shadow: 0 15px 20px #5c5644;
    }
  
    .name {
      font-size: 16px;
      margin-top: 15px;
    }
    
}
</style>